<template>
  <div class="container">
    <div class="perfect_box">
      <el-dialog :visible.sync="isBinding" width="600px" title="安全验证" :before-close="handleClose" :close-on-click-modal="false">
        <!-- <el-steps :active="stepsType">
          <el-step title="安装App"></el-step>
          <el-step title="扫一扫"></el-step>
          <el-step title="信息确认" icon="el-icon-success"></el-step>
        </el-steps> -->
        <div v-if="stepsType == 1" class="step-box two">
          <p class="box-title">1.使用手机号码登录<el-link type="primary" :underline="false">掌上仪信通App</el-link></p>
          <p class="box-title">2.点击首页右上方的扫一扫识别二维码完成验证</p>
          <div class="box-qrcode">
            <img class="qrcode-img" :src="`data:image/png;base64,${qrcodeBase64}`" alt="">
            <div v-if="isInvalid" class="qrcode-invalid">
              <p>二维码已失效</p>
              <el-button type="primary" icon="el-icon-refresh-right" @click="getCreatedQrCode">刷新</el-button>
            </div>
          </div>
          <p class="box-title download">您还没有下载掌上仪信通App？<a @click="getNextSteptwo">点击下载</a></p>
        </div>
        <div v-if="stepsType == 2" class="step-box one">
          <p class="box-title goback" @click="getPrevStepOne">←返回扫码</p>
          <img class="box-download" src="https://img1.17img.cn/17img/images/202207/pic/c70a2a79-3a6b-4872-b8d2-c9ba9d2f8464.jpg" alt="">
          <p class="box-title">扫码下载并安装掌上仪信通App</p>
        </div>
        <div v-if="stepsType == 3" class="step-box two">
          <p class="box-title">请按照手机提示操作</p>
          <img class="box-mobile" src="https://img1.17img.cn//ui/bimg/SH100000/yxt4/houtai/bg0707.png" alt="">
          <el-button class="two" type="primary" @click="getPrevStepTwo">上一步</el-button>
        </div>
        <span slot="footer" class="dialog-footer">
          <img class="footer-logo" src="https://img1.17img.cn/ui/bimg/SH100000/yxt4/houtai/home/HI.png" alt="">
          <img class="footer-avatar" :src="infoData.pic || 'https://img1.17img.cn/ui/simg/instrument/20220308/yxt_kefu_moren_2x_20220719.png'" alt="">
          <div class="f-info">
            <p class="info-p name">{{ infoData.name }}<span>销售顾问</span></p>
            <p class="info-p"><i class="el-icon-phone-outline" />{{ infoData.mobile }}</p>
            <p class="info-p"><i class="el-icon-message" />{{ infoData.email }}</p>
          </div>
          <div v-if="infoData.qrcode" class="f-qrcode">
            <img :src="infoData.qrcode" alt="">
            <p>在线客服</p>
          </div>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import api from '@/api'
// import { getImListId, getImShowId } from '@/utils/auth'
export default {
  name: 'PerfectInformation',
  data() {
    return {
      isBinding: true,
      isInvalid: false,
      qrcodeBase64: '',
      checkQrCodeValidity: '',
      qrCodeTimer: null,
      stepsType: 1,
      infoData: {}
    }
  },
  mounted() {
    this.getCreatedQrCode()
  },
  created() {
    // this.getCreatedQrCode()
    this.getKFInfo()
  },
  destroyed() {
    clearInterval(this.qrCodeTimer)
  },
  methods: {
    async getKFInfo() {
      const params = {
        imListId: getImListId()
      }
      const { data } = await api.common.findSaleByIMListId(params)
      this.infoData = data
    },
    async handleClose() {
      await this.$store.dispatch('user/logout')
      this.$router.push('/login?type=sign')
    },
    // 生成二维码
    async getCreatedQrCode() {
      const _this = this
      _this.isInvalid = false
      clearInterval(this.qrCodeTimer)
      const params = {
        action: 'login_auth',
        imListId: getImListId() || '127.0.0.1'
        // serverAddr: returnCitySN['cip']
      }
      const { data, message } = await api.login.createCodeImg(params)
      _this.qrcodeBase64 = data
      _this.checkQrCodeValidity = message
      _this.isScanningCode = true
      _this.qrCodeTimer = setInterval(() => {
        this.getcheckQrCodeValidity()
      }, 2000)
    },
    async getcheckQrCodeValidity() {
      const params = {
        code: this.checkQrCodeValidity,
        type: 4
      }
      const { code } = await api.login.checkQrCodeValidity(params)
      switch (code) {
        case 202:
          // 二维码失效
          this.isInvalid = true
          clearInterval(this.qrCodeTimer)
          break
        case 200:
          clearInterval(this.qrCodeTimer)
          const lsCodeMap = JSON.parse(localStorage.getItem('codeMap')) || []
          if (lsCodeMap.length === 0) {
            lsCodeMap.push({ 'userAccount': getImShowId(), 'code': this.checkQrCodeValidity })
          } else {
            lsCodeMap.map(item => {
              if (item.userAccount === getImShowId()) {
                item.code = this.checkQrCodeValidity
              } else {
                lsCodeMap.push({
                  userAccount: getImShowId(),
                  code: this.checkQrCodeValidity
                })
              }
            })
          }
          localStorage.setItem('codeMap', JSON.stringify(lsCodeMap))
          this.$router.push('/dashboard')
          break
        case 205:
          this.stepsType = 3
          break

        default:
          break
      }
    },
    getNextSteptwo() {
      this.stepsType = 2
      clearInterval(this.qrCodeTimer)
    },
    getPrevStepOne() {
      this.stepsType = 1
      this.getCreatedQrCode()
    },
    // 第三部按钮
    getPrevStepTwo() {
      this.stepsType = 1
      this.getCreatedQrCode()
      clearInterval(this.qrCodeTimer)
    }
  }
}
</script>
<style lang="scss" scoped>
  @import '@/styles/index.scss';
  .container {
    width: 100%;
    height: 100vh;
    background: url(https://img1.17img.cn//ui/bimg/SH100000/yxt4/houtai/home/gzt_bg02.png);
    position: relative;
    .perfect_box {
      ::v-deep .el-dialog {
        .el-dialog__header {
          width: 100%;
          height: 55px;
          background: #F5F8FC;
          line-height: 55px;
          padding: 0 16px;
          font-size: 16px;
          color: #202933;
          font-weight: 500;
          .el-dialog__headerbtn {
            .el-dialog__close {
              &:before {
                content: '退出登录';
              }
            }
          }
        }
        .el-dialog__body {
          width: 100%;
          height: 320px;
          box-sizing: border-box;
          padding: 40px 120px;
          .el-steps {
            .el-step__head{
              &.is-finish {
                .el-step__icon {
                  &.is-text {
                    background: #0c7ff2;
                    border-color: #0c7ff2;
                    color: #fff;
                    font-size: 14px;
                  }
                  &.is-icon {
                    width: auto;
                  }
                }
                .el-step__line {
                  height: 4px;
                  border-radius: 4px;
                  background: #E6F2FF;
                  left: 30px;
                  right: 6px;
                  .el-step__line-inner {
                    height: 4px;
                    background: #0c7ff2;
                    border-radius: 4px;
                  }
                }
              }
              &.is-process {
                .el-step__icon {
                  &.is-text {
                    background: #E6F2FF;
                    border-color: #E6F2FF;
                    color: #fff;
                    font-size: 14px;
                  }
                  &.is-icon {
                    color: #E6F2FF;
                  }
                }
                .el-step__line {
                  height: 4px;
                  border-radius: 4px;
                  background: #E6F2FF;
                  left: 30px;
                  right: 0;
                  .el-step__line-inner {
                    height: 4px;
                    background: #0c7ff2;
                    border-radius: 4px;
                  }
                }
              }
              &.is-wait {
                .el-step__icon {
                  &.is-icon {
                    color: #E6F2FF;
                    font-size: 14px;
                  }
                  color: #fff;
                  font-size: 14px;
                }
              }
            }
            .el-step__main {
              .el-step__title {
                font-size: 14px;
                color: #666;
                font-weight: 400;
              }
            }
          }
          .step-box {
            width: 100%;
            height: 265px;
            padding: 0;
            box-sizing: border-box;
            .box-download {
              width: 110px;
              height: 110px;
              display: block;
              margin: 0 auto 20px;
            }
            .box-mobile {
              width: 100%;
            }
            .box-qrcode {
              width: 110px;
              height: 110px;
              margin: 35px auto 20px;
              position: relative;
              img {
                width: 110px;
                height: 110px;
                display: block;
                margin: 0 auto 20px;
              }
              .qrcode-invalid {
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                z-index: 9;
                background: rgba(0, 0, 0, .6);
                padding-top: 30px;
                p {
                  text-align: center;
                  margin-bottom: 8px;
                  font-size: 12px;
                  color: #fff;
                  font-weight: bold;
                }
                .el-button {
                  padding: 5px 10px;
                  margin: 0 auto;
                  display: block;
                }
              }
            }
            .box-title {
              font-size: 14px;
              color: #999;
              margin:  0 auto;
              text-align: center;
              line-height: 1.5;
              @include flex(row, center, center);
              &.download {
                font-size: 12px;
                color: #7E8790;
                a {
                  color: #0C7FF2;
                }
              }
              &.goback {
                font-size: 12px;
                color: #7E8790;
                text-align: left;
                margin-bottom: 60px;
                cursor: pointer;
              }
            }
            .el-button {
              padding: 8px 12px;
              display: block;
              margin: 50px auto 0;
              &.two {
                margin-top: 30px;
              }
            }
          }
          .box-tip {
            font-size: 14px;
            color: #999;
            margin: 15px auto;
            text-align: center;
          }
        }
        .el-dialog__footer {
          height: 118px;
          padding: 20px 38px 15px;
          text-align: center;
          border-top: 1px solid #FF6332;
          background: linear-gradient(180deg, #FFF1ED 0%, rgba(255, 255, 255, 0) 100%);
          position: relative;
          .dialog-footer {
            display: block;
            width: 100%;
            height: 100%;
            @include flex(row, center, flex-start);
            position: relative;
            .footer-logo {
              width: 76px;
              height: 76px;
              position: absolute;
              right: 0;
              bottom: 0;
            }
            .footer-avatar {
              width: 47px;
              height: 47px;
              border-radius: 50%;
              margin-right: 20px;
            }
            .f-info {
              margin-right: 100px;
              .info-p {
                font-size: 10px;
                color: #4F5862;
                text-align: left;
                line-height: 1.8;
                &.name {
                  font-size: 13px;
                  font-weight: 500;
                  color: #202933;
                  margin-bottom: 15px;
                  line-height: 1;
                  span {
                    margin-left: 6px;
                    font-size: 10px;
                    color: #7E8790;
                  }
                }
                i {
                  font-size: 10px;
                  color: #4F5862;
                  margin-right: 7px;
                }
              }
            }
            .f-qrcode {
              img {
                width: 70px;
                height: 70px;
                margin-bottom: 5px;
              }
              p {
                font-size: 10px;
                color: #7E8790;
                line-height: 1.5;
              }
            }
          }
        }
      }
    }
  }
</style>
